<script setup>
import { ref } from 'vue';
import {reqGetCategory} from '../../api/category.js'
import {onLoad} from '@dcloudio/uni-app'
const categoryArr = ref([])
let active = ref(0)
const getCategory = async()=>{
	const res = await reqGetCategory()
	categoryArr.value = res.data
	console.log(res);
}
onLoad(async()=>{
	await getCategory()
})
const select =(index) =>{
	active.value = index
}
</script>
<!-- mark定义的数据父子里的属性名不能重复 -->
<template>
	<view class="category">
		 <scroll-view
		  scroll-y="true" 
		  class="scroll-l"
		  >
			<view class="l-item"
			 v-for="(item,index) in categoryArr"
			  v-bind:key="item.id"			  
			  @click="select(index)"
			  :class="{active:index===active}"
			  >
				{{item.name}}
			  </view>
		  </scroll-view>
		  <scroll-view
		   scroll-y="true" 
		   class="scroll-r"
		   >
		       <view class="scroll-r-content">
				   <navigator class="r-item" v-for="item in categoryArr[active].children" :url="`/pagesGoods/list/list?category2Id=${item.id}`" v-bind:key="item.id">
				   		<image class="img" :src="item.imageUrl"></image>  
						<view class="name">{{item.name}}</view>
				   </navigator>
			   </view>
		   </scroll-view>
	</view>
</template>
<style scoped lang="scss">
.category{
	display: flex;
	flex-direction: row;
	.scroll-l{
		width: 180rpx;
		height: 100vh;
		// padding: 0 22rpx;
		.l-item{
			height: 64rpx;
			box-sizing: border-box;
			line-height: 64rpx;
			font-size: 26rpx;		
			text-align: center;
		}
		.active{
			border-left: 6rpx solid #f3514f;
			width: 174rpx;
		}
	}
	.scroll-r{
		flex: 1;
		.scroll-r-content{
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: flex-start;
			align-items: center;
			.r-item{
				width: 33%;				
				margin-top: 16rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				.img{
					width: 80rpx;
					height: 80rpx;
				}
				.name{
					font-size: 28rpx;
				}
			}
		}
	}
}
</style>
